import React, { useState, useReducer, ReducerWithoutAction, useCallback, useRef } from 'react'
import { Button } from 'antd'
import TableList from './components/TableList'
import NewModal from './components/NewModal'
import "./index.scss"
import usePicClassifyStore from '../../store/usePicClassifyStore'
export const Context = React.createContext<any>({ state: {}, dispatch: {} })
const PicClassify = () => {
    const { state, dispatch, ActionState } = usePicClassifyStore()
    const tableRef = useRef<any>(null)
    const { visible } = state
    const handleCancel = useCallback(() => {
        dispatch({ type: ActionState.SET_VISIBLE, payload: false })
    }, [])
    const handleOk = useCallback(() => {
        tableRef.current.getList()
        dispatch({ type: ActionState.SET_VISIBLE, payload: false })
    }, [])
    const handleConfig = (values: any) => {
        dispatch({ type: ActionState.SET_ID, payload: values.id })
        dispatch({ type: ActionState.SET_VISIBLE, payload: true })
        dispatch({ type: ActionState.SET_FORM_DATA, payload: { ...values } })
    }
    return <Context.Provider value={{ state, dispatch, ActionState }}>
        <div className="im_classify">
            <div className="im_classify_add">
                <Button type="primary" onClick={() => dispatch({ type: ActionState.SET_VISIBLE, payload: true })}>新增分类</Button>
            </div>
            <TableList ref={tableRef} handleConfig={handleConfig}></TableList>
            <NewModal visible={visible} handleCancel={handleCancel} handleOk={handleOk}></NewModal>
        </div >
    </Context.Provider>
}

export default PicClassify